<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>globalCompositeOperation</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
</head>

<body>
  <canvas id="canvas" style=" border:1px solid #ccc ;display: block; margin: 100px auto;"></canvas>

</body>
<script>
  let canvas = document.querySelector('#canvas')
  canvas.width = 800
  canvas.height = 800
  let ctx = canvas.getContext('2d')

  // 第一个矩形 为目标图像
  ctx.fillStyle = 'hotpink'
  ctx.fillRect(100, 100, 300, 300)

  ctx.globalCompositeOperation = 'xor'

  /**
   * source-over : 默认值，在目标图像上显示源图像
   * source-atop : 在目标图像顶部显示源图像，源图像位于目标图像之外的是不可见的
   *source-in : 在目标图像中显示源图像，只有目标图像内的源图像部分才会显示 , 目标图像是透明的
   *source-out： 在目标图像之外显源图像，只会显示目标图像之外的部分，目标图像是透明的
   * destination-over : 在源图像上方显示目标图像
   * destination-atop ：在源图像顶部显示目标图像，源图像之外的目标图像部分不会显示
   * destination-in ： 在源图像中显示目标图像，只有源图像内的目标图像部分会被显示，源图像是透明的
   * destination-out ： 在源图像中显示目标图像，只有源图像外的目标图像部分会被显示，源图像是透明的
   * lighter ：显示源图像+目标图像
   * copy ： 显示源图像，忽略目标图像
   * xor ： 使用异或操作对源图像与目标图像进行组合
   *
   * **/
  // 第二个矩形 为源图像
  ctx.fillStyle = 'deepskyblue'
  ctx.fillRect(250, 250, 300, 300)
</script>

</html>